<template>
	<view id="customSelect" class="select-container">
		<img class="select-selected" @click="isStart()" @click.stop="" src="@/static/设置2.png" />
		<view class="select-items select-hide" ref="showPanel" :class="{ isDisplay: isDisplay }">
			<div class="select-item" v-if="propsData.type == 'component'" @click="toOutInventory()">回库</div>
			<div class="select-item" v-if="propsData.type == 'component'" @click="toDeletePrograms()">删除元件</div>
			<div class="select-item" v-else @click="toDeletePrograms()">删除差旅</div>
		</view>
	</view>
</template>

<script>
import { onMounted } from 'vue';

export default {
	data() {
		return {
			// 是否打开选项卡
			isDisplay: true
		};
	},
	methods: {
		isStart() {
			this.isDisplay = !this.isDisplay;
		},
		closeShow(e) {
			if (this.$refs.showPanel) {
				let isSelf = this.$refs.showPanel.$el.contains(e.target);
				if (!isSelf) {
					this.isDisplay = true;
				}
			}
		},
		toDeletePrograms() {
			console.log(this.propsData.id);
		},
		// 到出库页面
		toOutInventory() {
			uni.navigateTo({
				url: `/pages/inStorage/returnInventory?id=${this.propsData.id}&two=${true}`
			});
		}
	},
	mounted() {
		document.addEventListener('click', this.closeShow);
	},
	BeforeUnloadEvent() {
		this.isDisplay = true;
		// 移除事件监听器，防止内存泄漏
		document.removeEventListener('click', this.closeShow);
	},
	props: {
		propsData: {
			type: Object
		}
	}
};
</script>

<style scoped>
/* 选择模型 */
.select-container {
	position: relative;
	line-height: 1;
}

.select-container img {
	width: 60rpx;
	height: 60rpx;
}
.select-selected {
	color: #555;
	cursor: pointer;
	margin: 0;
}
.select-item {
	margin-top: 30rpx;
}

.select-items {
	position: absolute;
	width: 230rpx;
	top: 80rpx;
	left: -130rpx;
	right: 0;
	z-index: 100;
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 3px rgba(168, 168, 168, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 20rpx;
}

.isDisplay {
	display: none;
}
</style>
